/* =====================================================================
   GREEN KAIZEN - LEARNER PAGES   (gk-learner.css)
   Master.master  +  Frm_KRA_Target.aspx  +  GKN_Improvement.aspx
   Look only: no ID, event or code change. Link it in Master.master <head>
   AFTER opexworks.css. Everything is scoped to #container (the master's
   main-container), so it beats the old page <style> blocks.
   ===================================================================== */

:root {
    --gk-900: #0f4a33; --gk-800: #15603f; --gk-700: #15803d; --gk-600: #16a34a; --gk-500: #22c55e;
    --gk-100: #e7f6ec; --gk-50: #f4faf6;
    --gk-line: #d4e5da; --gk-line2: #ebf4ee;
    --gk-ink: #17261d; --gk-ink2: #3d5246; --gk-muted: #66796d;
    --gk-red: #dc2626;
    --gk-shadow: 0 2px 4px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.07);
    --gk-gut: 18px;
    --gk-font: "Segoe UI", "Nirmala UI", "Noto Sans Devanagari", Roboto, Arial, sans-serif;
}

/* ---------- page ---------- */
html body { background: var(--gk-50) !important; }
#container, #container .main-content, #container .page-content { background: var(--gk-50) !important; }
#container, #container :is(h1, h2, h3, h4, h5, h6, p, span, label, a, input, select, textarea, button, td, th) {
    font-family: var(--gk-font) !important;
}
#container .page-content { min-height: 100vh; padding: 0 0 24px !important; }

/* ---------- header ---------- */
#container .header-section {
    position: sticky; top: 0; z-index: 1020;
    background: #fff !important; border-bottom: 3px solid var(--gk-700) !important;
    box-shadow: 0 2px 10px rgba(16,24,40,.06); padding: 4px 18px !important; margin-bottom: 18px;
}
#container .header-section .container-fluid { padding: 0 !important; }
#container .header-section > .container-fluid > .row:first-child { align-items: center; }
#container .header-section img { height: 46px !important; width: auto !important; max-width: 220px; object-fit: contain !important; }
#container .header-section .profile-name.float-right { align-items: center; gap: 4px; }
#container .header-section .user-details { padding-top: 0 !important; display: flex; align-items: center; }
#container .header-section .username {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
    border-radius: 999px; background: var(--gk-100); color: var(--gk-900) !important;
    font-size: 13px !important; font-weight: 600 !important; white-space: nowrap;
}
#container .header-section .username::before {     /* small round avatar */
    content: ""; width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: var(--gk-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / 15px no-repeat;
}
#container .header-section ul { margin: 0 !important; padding: 0 !important; list-style: none; }
#container .header-section li { list-style: none !important; margin-top: 0 !important; }
/* three-dot button */
#container .menu-icon {
    width: 38px; height: 38px; margin: 0 0 0 6px !important; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid var(--gk-line); background: #fff; transition: background .15s, border-color .15s;
}
#container .menu-icon:hover { background: var(--gk-100); border-color: #9fcdb0; }
#container .menu-icon .dot { width: 16px !important; height: 2px !important; margin: 2px 0 !important; border-radius: 2px; background: var(--gk-800) !important; }
/* menu card */
#container #menu.dropdown-menu {
    min-width: 210px; padding: 6px !important; border: 1px solid var(--gk-line) !important;
    border-radius: 12px !important; box-shadow: 0 12px 30px rgba(10,20,40,.16) !important;
}
#container #menu .dropdown-item { display: block !important; padding: 0 !important; background: none !important; }
#container #menu .dropdown-item a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
    color: var(--gk-ink) !important; font-size: 13.5px !important; font-weight: 500;
}
#container #menu .dropdown-item a:hover { background: var(--gk-100) !important; color: var(--gk-900) !important; }
#container #menu .dropdown-item svg { width: 18px; height: 18px; color: var(--gk-700); flex: none; }
#container #menu .dropdown-item:last-child { margin-top: 4px; padding-top: 4px !important; border-top: 1px solid var(--gk-line2); }
#container #menu .dropdown-item:last-child svg { color: var(--gk-red); }
#container [id$="Demo_msg"] {
    margin: 4px 0 0; padding: 3px 10px; border-radius: 999px; background: #fff7e6; color: #9a5b00 !important;
    font-size: 11px !important;
}

/* ---------- content width ---------- */
#container .vertical-menu { border-right: 0 !important; }
#container .page-content > .header-section ~ *:not(.modal):not(script):not(style) { margin-left: var(--gk-gut); margin-right: var(--gk-gut); }
#container .page-content > .header-section ~ .row { margin-left: var(--gk-gut) !important; margin-right: var(--gk-gut) !important; }

/* ---------- page title (the h2 with the black underline wrapper) ---------- */
#container div[style*="border-bottom: 1px solid #000"] {
    border-bottom: 0 !important; margin: 0 var(--gk-gut) 14px !important;
}
#container h2.title-v1 {
    margin: 0 !important; padding: 2px 0 2px 12px !important;
    border-left: 4px solid var(--gk-700); color: var(--gk-900) !important;
    font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.01em;
}

/* ---------- buttons ---------- */
#container .btn.opex-btn, #container input.opex-btn {
    height: 38px; padding: 0 20px !important; margin-top: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0 !important; border-radius: 8px !important;
    background: linear-gradient(180deg, var(--gk-600), var(--gk-700)) !important;
    color: #fff !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 38px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 4px 10px rgba(21,128,61,.22) !important;
    transition: transform .12s, box-shadow .12s, filter .12s;
    white-space: nowrap;
}
#container .btn.opex-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(21,128,61,.28) !important; }
#container .btn.opex-btn:active { transform: none; }
#container .btn.opex-btn:disabled, #container .btn.opex-btn.aspNetDisabled, #container .btn.opex-btn[disabled] {
    background: #e5ebe7 !important; color: #8a9a90 !important; box-shadow: none !important; transform: none !important; cursor: not-allowed;
}
/* Delete / Cancel / No = quiet buttons */
#container .btn.opex-btn:is([id$="SBTN_DELETE"], [id$="btn_Cancel"], [id$="Edit_btn_Cancel"], [id$="Buttoncancel"]) {
    background: #fff !important; color: var(--gk-ink2) !important; border: 1px solid #c9d6ce !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.06) !important;
}
#container .btn.opex-btn[id$="SBTN_DELETE"] { color: var(--gk-red) !important; border-color: #f3c4c4 !important; }
#container .btn.opex-btn[id$="SBTN_DELETE"]:hover { background: #fef2f2 !important; }
#container .btn.opex-btn:is([id$="btn_Cancel"], [id$="Buttoncancel"]):hover { background: var(--gk-50) !important; }
#container .btn.opex-btn[id$="ButtonYes"] { background: linear-gradient(180deg, #ef4444, var(--gk-red)) !important; box-shadow: 0 4px 10px rgba(220,38,38,.25) !important; }

/* "Add New Improvement" */
#container [id$="div_Button_AddImprovement"] {
    flex: none !important; max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 var(--gk-gut) 16px !important; text-align: left !important;
}
#container [id$="Button_AddImprovement"] { width: auto !important; }
#container [id$="Button_AddImprovement"]::before { content: none; }

/* ---------- form controls ---------- */
#container :is(input[type="text"], input[type="date"], input[type="number"], input:not([type]), textarea, select, .form-control, .custom-select) {
    height: 38px; padding: 6px 10px !important; border: 1px solid #c9d6ce !important; border-radius: 8px !important;
    background-color: #fff !important; color: var(--gk-ink) !important; font-size: 13.5px !important;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.04) !important; transition: border-color .15s, box-shadow .15s;
}
#container textarea, #container textarea.form-control { height: auto; min-height: 80px; line-height: 1.45; resize: vertical; }
#container :is(input, textarea, select, .form-control):focus {
    outline: 0 !important; border-color: var(--gk-600) !important; box-shadow: 0 0 0 3px rgba(22,163,74,.18) !important;
}
#container :is(input, textarea, select):disabled, #container .aspNetDisabled.form-control { background: #f1f5f2 !important; color: var(--gk-muted) !important; }
/* drop list: green arrow button */
#container select, #container select.form-control, #container select.custom-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px !important; cursor: pointer;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--gk-600), var(--gk-700)) !important;
    background-repeat: no-repeat !important; background-position: right 8px center, right 0 top 0 !important;
    background-size: 14px 14px, 32px 100% !important;
    background-color: var(--gk-50) !important;
}

/* ---------- KRA Target: filter bar (Month / Year / Go / Save) ---------- */
#container .row:has(> .form-group-dashboard [id$="Cmb_Months"]) { margin: 0 var(--gk-gut) 16px !important; }
#container .row > .form-group-dashboard:has([id$="Cmb_Months"]) {
    flex: 0 0 100% !important; max-width: 100% !important; padding: 12px 16px !important; margin: 0 !important;
    background: #fff; border: 1px solid var(--gk-line); border-radius: 12px; box-shadow: var(--gk-shadow);
}
#container .row > .form-group-dashboard:has([id$="Cmb_Months"]) > div > .row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 !important;
}
#container .row > .form-group-dashboard:has([id$="Cmb_Months"]) > div > .row > [class*="col-"] {
    flex: none !important; max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important;
}
#container .row > .form-group-dashboard:has([id$="Cmb_Months"]) .form-group-dashboard { gap: 8px; margin: 0 !important; }
#container .row > .form-group-dashboard:has([id$="Cmb_Months"]) label.opex-label {
    width: auto !important; margin: 0 !important; white-space: nowrap;
    color: var(--gk-ink2) !important; font-size: 13px !important; font-weight: 600 !important;
}
#container [id$="Cmb_Months"] { width: 100px !important; }
#container [id$="SDTP_Years"] { width: 84px !important; text-align: center; }
#container [id$="BntSave"] { margin-left: 4px; }

/* ---------- tiles (cards) ---------- */
#container .tile-container {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px;
}
#container .tile {
    position: relative; width: auto !important; height: auto !important; margin: 0 !important; float: none !important;
    padding: 16px 18px 14px !important; overflow: hidden;
    background: #fff !important; border: 1px solid var(--gk-line) !important; border-top: 4px solid var(--gk-700) !important;
    border-radius: 12px !important; box-shadow: var(--gk-shadow) !important;
    transition: transform .15s, box-shadow .15s;
}
#container .tile-container > .tile { display: flex; flex-direction: column; }
#container .tile-container > .tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.10) !important; }
#container .tile > .row { margin: 0 !important; }
#container .tile > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0 !important; }
#container .tile .form-group { margin: 0 !important; padding: 6px 0; gap: 10px; border-bottom: 1px dashed var(--gk-line2); }
#container .tile > .row:last-of-type .form-group { border-bottom: 0; }
#container .tile h5 {
    flex: 0 0 132px !important; width: 132px !important; margin: 0 !important; padding-top: 1px !important;
    color: var(--gk-muted) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em; line-height: 1.5;
}
#container .tile p {
    flex: 1 1 auto !important; width: auto !important; margin: 0 !important;
    color: var(--gk-ink) !important; font-size: 13.5px !important; line-height: 1.5; word-break: break-word;
}
/* GKN Improvement card: Date as a badge, Theme stronger */
#container .tile [id$="LB_kaizen_Reg_Date"] {
    flex: none !important; display: inline-block; padding: 1px 10px; border-radius: 999px;
    background: var(--gk-100); color: var(--gk-800) !important; font-weight: 600; font-size: 12.5px !important;
}
#container .tile [id$="LB_Kaizen_Theme"] { color: var(--gk-900) !important; font-weight: 600; }
#container .tile [id$="LB_Description"] { font-weight: 600; }
#container .tile [id$="LB_Expect_Outcome"] { color: var(--gk-700) !important; font-weight: 700; }
/* card buttons */
#container .tile > .row.mt-0 { margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--gk-line2); }
#container .tile > .row:has(+ .row.mt-0) { margin-bottom: 12px !important; }
#container .tile > .row.mt-0 .btn.opex-btn { height: 34px; line-height: 34px !important; padding: 0 16px !important; font-size: 13px !important; }

/* KRA Target cards: two inputs side by side */
#container .tile:has([id$="txt_Benchmark"]) > .row:last-of-type { gap: 12px; margin-top: 8px !important; }
#container .tile:has([id$="txt_Benchmark"]) > .row:last-of-type > .col-6 { flex: 1 1 0 !important; max-width: none !important; }
#container .tile:has([id$="txt_Benchmark"]) > .row:last-of-type .form-group {
    flex-direction: column; gap: 4px; padding: 10px 12px !important; border: 1px solid var(--gk-line2) !important;
    border-radius: 10px; background: var(--gk-50);
}
#container .tile:has([id$="txt_Benchmark"]) > .row:last-of-type h5 { flex: none !important; width: auto !important; padding: 0 !important; }
#container .tile :is([id$="txt_Benchmark"], [id$="txt_Target"]) {
    width: 100% !important; text-align: right; font-weight: 600; font-size: 15px !important;
}
#container .tile [id$="txt_Target"] { border-color: #9fcdb0 !important; }

/* ---------- modals ---------- */
#container .modal { background-color: rgba(15,27,45,.40) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#container .modal-dialog-custome { max-width: 520px; width: calc(100% - 24px); margin-left: auto; margin-right: auto; }
#container .modal-content {
    width: 100% !important; border: 0 !important; border-radius: 14px !important; overflow: hidden;
    box-shadow: 0 24px 60px rgba(10,20,40,.35), 0 4px 12px rgba(10,20,40,.18) !important;
}
#container .modal-headermsg { display: none; }
#container .modal-header {
    align-items: center; padding: 12px 14px 12px 18px !important; border: 0 !important;
    background: linear-gradient(180deg, var(--gk-800), var(--gk-900)) !important;
}
#container .modal-header .modal-title { color: #fff !important; font-size: 15px !important; font-weight: 600 !important; }
#container .modal-header .close {
    width: 32px; height: 32px; margin: 0 !important; padding: 0 !important; opacity: 1 !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--gk-red) !important; color: #fff !important; text-shadow: none !important; font-size: 18px;
}
#container .modal-header .close:hover { background: #b91c1c !important; }
#container .modal-header .close i { display: none !important; }
#container .modal-header .close::before { content: "\00d7"; font: 400 24px/1 Arial, sans-serif; color: #fff; }
#container .modal-body { padding: 16px 18px !important; background: #fff; }
/* the form inside the add / edit popups: no card-in-card */
#container .modal .tile-container { display: block !important; }
#container .modal .tile {
    padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible;
}
#container .modal .tile:hover { transform: none; }
#container .modal .tile .form-group { display: block; border: 0; padding: 0 0 10px; }
#container .modal .tile h5 {
    display: block; width: auto !important; flex: none !important; margin: 0 0 6px !important;
    color: var(--gk-ink2) !important; font-size: 12.5px !important; font-weight: 600 !important;
}
#container .modal .required-star { color: var(--gk-red); }
#container .modal .tile :is(.form-control, select, textarea) { width: 100% !important; max-width: 100%; }
#container .modal .tile :is([id$="txt_Expect_outcome"], [id$="txt_editExpect_outcome"]) { width: 160px !important; }
#container .modal .tile select { height: 38px !important; }
#container .modal [id$="SBTN_Edit_Idea"] {      /* "pick an idea" button next to the text box */
    flex: none; width: 40px !important; height: 40px !important; padding: 8px !important; margin-left: 8px !important;
    border-radius: 10px !important; background: var(--gk-100) !important; border: 1px solid #9fcdb0 !important;
}
#container .modal [id$="SBTN_Edit_Idea"]:hover { background: #d9f0e1 !important; }
#container .modal-footer {
     padding: 12px 18px !important; justify-content: flex-end;
    border-top: 1px solid var(--gk-line2) !important; background: var(--gk-50) !important;
}
#container .modal-footer > .row { margin: 0 !important; width: 100%; justify-content: flex-end; gap: 10px; }
#container .modal-footer > .row > [class*="col-"] { flex: none; max-width: none; width: auto; padding: 0 !important; display: flex; gap: 10px; }
#container .modal-footer .btn.opex-btn { min-width: 96px; }
#container .modal-footer .ml-3, #container .modal-footer .mr-1 { margin-left: 0 !important; margin-right: 0 !important; }
/* small message popups (success / error / delete) */
#container .modal .dispatch-asn-title:empty, #container .modal .dispatch-asn-title:has(h4 > span:empty) { display: none; }
#container .modal .new-label_Msg { width: auto !important; color: var(--gk-ink) !important; font-size: 14px !important; font-weight: 500 !important; }
#container #Successfullmsg .modal-content { border-top: 4px solid var(--gk-600) !important; }
#container :is(#erromsg, #alertmsg) .modal-content { border-top: 4px solid var(--gk-red) !important; }
#container :is(#Successfullmsg, #erromsg, #alertmsg) .modal-dialog-custome { max-width: 420px; }
    #container :is(#Successfullmsg, #erromsg, #alertmsg) .modal-footer {
        margin: 14px 14px 14px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
#container :is(#Successfullmsg, #erromsg, #alertmsg) .dispatch-form > .col-md-12 { padding: 0 !important; }

/* ---------- "Select Kaizen Idea" grid ---------- */
#container #showkaizenTheme .modal-dialog { max-width: 760px; }
#container .custom-grid {
    margin: 0 !important; border: 1px solid var(--gk-line) !important; border-collapse: separate !important; border-spacing: 0;
    border-radius: 10px; overflow: hidden; background: #fff;
}
#container .custom-grid th {
    position: sticky; top: 0; z-index: 1; padding: 10px 12px !important; border: 0 !important;
    background: linear-gradient(180deg, var(--gk-800), var(--gk-900)) !important; color: #fff !important;
    font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
#container .custom-grid td {
    padding: 9px 12px !important; border: 0 !important; border-bottom: 1px solid var(--gk-line2) !important;
    color: var(--gk-ink) !important; font-size: 12.5px !important; line-height: 1.45; vertical-align: top;
    white-space: normal !important; background: #fff;
}
#container .custom-grid tr:nth-child(even) td { background: #fafcfb; }
#container .custom-grid tr:hover td { background: var(--gk-100); }
#container .custom-grid td:first-child { width: 1%; white-space: nowrap !important; }
#container .custom-grid td:first-child a {            /* the "Select" link */
    display: inline-block; padding: 4px 12px; border-radius: 6px; background: var(--gk-700); color: #fff !important;
    font-size: 12px !important; font-weight: 600;
}
#container .custom-grid td:first-child a:hover { background: var(--gk-800); }
#container .custom-grid td:nth-child(2) { font-weight: 600; color: var(--gk-900) !important; }

/* ---------- footer ---------- */
#container .main-content > .row { margin: 0 !important; }
#container [id$="lbl_Copyright"], #container [id$="lbl_footer"] { color: var(--gk-muted) !important; font-size: 12px !important; }
#container [id$="lbl_Copyright"] a { color: var(--gk-700) !important; font-size: 12px !important; font-weight: 600; }

/* ---------- phone ---------- */
@media (max-width: 576px) {
    #container .header-section { padding: 4px 10px !important; }
    #container .header-section img { height: 38px !important; max-width: 140px; }
    #container .header-section .username { font-size: 12px !important; padding-right: 10px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
    #container { --gk-gut: 10px; }
    #container .tile-container { grid-template-columns: 1fr; }
    #container .tile h5 { flex-basis: 110px !important; width: 110px !important; }
    #container h2.title-v1 { font-size: 19px !important; }
}