/* ================================================================
   DocuTalk — Navigation Top Menu — Redesigned
   Replaces: resources/assets/css/navigation/navigation-top-menu.css
   Backup:   navigation-top-menu.css.backup.20260504_075730
   ================================================================ */

   :root {
    --nav-bg:           #0d0d0d;
    --nav-border:       rgba(255,255,255,0.07);
    --nav-height:       50px;
    --accent:           #ff6171;
    --accent-dark:      #e84757;
    --accent-dim:       rgba(255,97,113,0.15);
    --btn-hover-bg:     rgba(255,255,255,0.07);
    --btn-active-bg:    rgba(255,97,113,0.18);
    --btn-active-color: #ff6171;
    --text-dim:         rgba(255,255,255,0.5);
    --text-bright:      #ffffff;
    --sep-color:        rgba(255,255,255,0.1);
    --dropdown-bg:      #161616;
    --dropdown-border:  rgba(255,255,255,0.09);
    --dropdown-hover:   rgba(255,255,255,0.06);
  }
  
  /* ── Shell ── */
  .navigation-top-menu {
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    width: 100%;
    box-shadow: 0 2px 16px rgba(0,0,0,0.5);
  }
  .navigation-top-menu ul { display:flex; align-items:stretch; }
  .navigation-top-menu .list-inline { margin-left:0; }
  .navigation-top-menu .list-inline > li { padding-right:0; padding-left:0; }
  
  /* items-wrapper */
  .navigation-top-menu ul.items-wrapper { margin:0 !important; display:block; height:var(--nav-height); }
  
  /* LEFT */
  .navigation-top-menu ul.items-wrapper li.left { display:flex; position:absolute; transition:all linear 3s; }
  .navigation-top-menu ul.items-wrapper li.left.ng-hide { visibility:hidden; opacity:0; width:0; }
  .navigation-top-menu ul.items-wrapper li.left > ul { height:var(--nav-height); }
  
  /* MIDDLE */
  .navigation-top-menu ul.items-wrapper li.middle { display:flex; justify-content:center; z-index:2; }
  .navigation-top-menu ul.items-wrapper li.tools-and-search { display:inline-block; margin-left:50%; transform:translateX(-50%); height:var(--nav-height); }
  
  /* map-tools */
  .navigation-top-menu ul.items-wrapper li.middle ul.map-tools { transition:all linear 0.5s; flex-direction:row; justify-content:flex-end; height:var(--nav-height); position:absolute; top:0; right:100%; }
  .navigation-top-menu ul.items-wrapper li.middle ul.map-tools.ng-hide { visibility:hidden; opacity:0; width:0; }
  .navigation-top-menu ul.items-wrapper li.middle ul.map-tools li { margin-right: 3px;}
  
  /* search-wrapper */
  .navigation-top-menu ul.items-wrapper li.middle ul.search-wrapper { margin-left:0.5em; padding-top:8px; padding-bottom:8px; }
  
  /* write-mode-tools */
  .navigation-top-menu ul.items-wrapper li.middle ul.write-mode-tools { transition:all linear 0.5s; margin-left:0; height:var(--nav-height); position:absolute; top:0; left:100%; }
  .navigation-top-menu ul.items-wrapper li.middle ul.write-mode-tools.ng-hide { visibility:hidden; opacity:0; width:0; }
  .navigation-top-menu ul.items-wrapper li.middle ul.write-mode-tools li { margin-right:7px; }
  
  /* RIGHT */
  .navigation-top-menu ul.items-wrapper li.right { float:right; height:var(--nav-height); transition:all linear 1s; }
  .navigation-top-menu ul.items-wrapper li.right.ng-hide { visibility:hidden; opacity:0; width:0; }
  .navigation-top-menu ul.items-wrapper li.right > ul { height:var(--nav-height); }
  
  /* Vertical centering */
  .navigation-top-menu ul li > button,
  .navigation-top-menu ul li > .btn { position:relative; top:50%; transform:translateY(-50%); }
  
  /* ── btn-tools ── */
  .navigation-top-menu ul li > .btn.btn-tools {
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--text-bright); width:34px; height:34px; line-height:1;
    font-size:14px; text-align:center; padding:0; border:0;
    border-radius:6px; margin:0 1px; outline:none !important;
    transition:background 0.18s ease, color 0.18s ease;
    background:transparent;
  }
  .navigation-top-menu ul li > .btn.btn-tools:hover,
  .navigation-top-menu ul li > .btn.btn-tools:focus { background:var(--btn-hover-bg); color:var(--text-bright); }
  .navigation-top-menu ul li > .btn.btn-tools.active:not([disabled]),
  .navigation-top-menu ul li > .btn.btn-tools:active:not([disabled]) { background:var(--btn-active-bg); color:var(--btn-active-color); }
  .navigation-top-menu ul li > .btn.btn-tools i { display:inline-block; font-size:inherit; line-height:inherit; }
  .navigation-top-menu ul li > .btn.btn-tools svg path { fill:var(--text-bright); transition:fill 0.18s ease; }
  .navigation-top-menu ul li > .btn.btn-tools svg rect { fill:rgba(255,255,255,0.8); stroke:rgba(255,255,255,0.8); }
  .navigation-top-menu ul li > .btn.btn-tools.active:not([disabled]) svg path,
  .navigation-top-menu ul li > .btn.btn-tools:active:not([disabled]) svg path { fill:var(--btn-active-color); }
  
  /* ── btn-write-mode (database actions) ── */
  .navigation-top-menu .btn.btn-write-mode {
    display:inline-flex; align-items:center; justify-content:center;
    background-color:rgba(255,255,255,0.06); width:32px; height:32px;
    line-height:1; font-size:1.1em; text-align:center; padding:0;
    border:1px solid rgba(255,255,255,0.1); border-radius:6px;
    margin:0 2px; outline:none !important;
    transition:all ease 0.2s; color:rgba(255,255,255,0.75); opacity:0.9;
  }
  .navigation-top-menu .btn.btn-write-mode:not(.last) { margin-right:3px; }
  .navigation-top-menu .btn.btn-write-mode:hover,
  .navigation-top-menu .btn.btn-write-mode:active { opacity:1; background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); }
  .navigation-top-menu .btn.btn-write-mode i { font-size:inherit; vertical-align:middle; }
  .navigation-top-menu .btn.btn-write-mode.btn-write-mode-change-state > i { vertical-align:initial; }
  .navigation-top-menu .btn.btn-write-mode .material-icons { vertical-align:baseline; font-size:1.1em; }
  
  /* ── btn-autopilot ── */
  .navigation-top-menu .btn.btn-autopilot { background-color:transparent; border-radius:6px; padding:4px 6px; border:1px solid transparent; transition:all 0.2s ease; }
  .navigation-top-menu .btn.btn-autopilot:hover,
  .navigation-top-menu .btn.btn-autopilot:focus { background-color:var(--btn-hover-bg); border-color:var(--sep-color); }
  
  /* ── btn-autopilot-choice (mobile) ── */
  .navigation-top-menu .btn.btn-autopilot-choice { background-color:transparent; border-radius:6px; padding:4px 6px; border:1px solid transparent; outline:none; opacity:0.9; transition:all 0.2s ease; }
  .navigation-top-menu .btn.btn-autopilot-choice:hover,
  .navigation-top-menu .btn.btn-autopilot-choice:focus { background-color:var(--btn-hover-bg); border-color:var(--sep-color); opacity:1; }
  
  /* ── btn-vidpitch (LOAD PDF) ── */
  .navigation-top-menu .btn.btn-vidpitch {
    background:transparent; color:var(--text-bright); padding:3px 10px;
    border:1px solid rgba(255,255,255,0.2); border-radius:5px; margin:0 4px;
    font-size:0.82em; transition:all 0.2s ease;
    display:inline-flex; align-items:center; gap:4px;
  }
  .navigation-top-menu .btn.btn-vidpitch .vidpitch-text { line-height:1; vertical-align:baseline; font-size:0.85em; font-family:Raleway,sans-serif; font-weight:700; }
  .navigation-top-menu .btn.btn-vidpitch .vidpitch-text > span { color:var(--accent); }
  .navigation-top-menu .btn.btn-vidpitch .pdf-upload { fill:var(--accent); }
  .navigation-top-menu .btn.btn-vidpitch:hover,
  .navigation-top-menu .btn.btn-vidpitch:focus { border-color:var(--accent); background:var(--accent-dim); }
  .navigation-top-menu .btn.btn-vidpitch:hover .pdf-upload,
  .navigation-top-menu .btn.btn-vidpitch:focus .pdf-upload { fill:var(--text-bright); }
  .navigation-top-menu .btn.btn-vidpitch:hover .vidpitch-text > *,
  .navigation-top-menu .btn.btn-vidpitch:focus .vidpitch-text > * { color:var(--text-bright); }
  
  /* ── btn-archives (folder) ── */
  .navigation-top-menu .btn.btn-archives { background:transparent; color:var(--text-bright); padding:3px 6px; border:1px solid transparent !important; border-radius:6px; font-size:0.9em; transition:all 0.2s ease; }
  .navigation-top-menu .btn.btn-archives:hover,
  .navigation-top-menu .btn.btn-archives:focus { border-color:rgba(255,255,255,0.15) !important; background:var(--btn-hover-bg); }
  .navigation-top-menu .btn.btn-archives:hover .fa-folder,
  .navigation-top-menu .btn.btn-archives:focus .fa-folder { color:var(--accent) !important; }
  
  /* ── btn-menu-squares → hamburger icon via CSS ── */
  .navigation-top-menu .btn.btn-menu-squares {
    background-color:transparent; border:1px solid transparent;
    border-radius:6px; width:34px; height:34px; padding:0; outline:none;
    opacity:0.85; transition:all 0.2s ease;
    display:inline-flex; align-items:center; justify-content:center;
    position:relative;
  }
  .navigation-top-menu .btn.btn-menu-squares:hover,
  .navigation-top-menu .btn.btn-menu-squares:active { background:var(--btn-hover-bg); border-color:var(--sep-color); opacity:1; }
  
  /* Hide the original 9-squares SVG */
  .navigation-top-menu .btn.btn-menu-squares svg { display:none !important; }
  
  /* Inject hamburger lines using ::before pseudo-element */
  .navigation-top-menu .btn.btn-menu-squares::before {
    content:'';
    display:block;
    width:16px;
    height:12px;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.8) 100%, transparent 0%),
      linear-gradient(to right, rgba(255,255,255,0.8) 100%, transparent 0%),
      linear-gradient(to right, rgba(255,255,255,0.8) 100%, transparent 0%);
    background-size: 16px 2px;
    background-position: 0 0, 0 5px, 0 10px;
    background-repeat: no-repeat;
    transition: background-image 0.2s ease;
  }
  .navigation-top-menu .btn.btn-menu-squares:hover::before {
    background-image:
      linear-gradient(to right, #fff 100%, transparent 0%),
      linear-gradient(to right, #fff 100%, transparent 0%),
      linear-gradient(to right, #fff 100%, transparent 0%);
  }
  
  /* ── Eye → Lock icon override (access level button) ── */
  /* Hide the fa-eye icon and replace with fa-lock using font-awesome unicode */
  .navigation-top-menu .btn.btn-write-mode.btn-write-mode-change-state i.fa.fa-eye,
  .navigation-top-menu .btn.btn-write-mode.btn-write-mode-change-state i.eye {
    font-size:0 !important; /* hide original */
  }
  .navigation-top-menu .btn.btn-write-mode.btn-write-mode-change-state i.fa.fa-eye::before,
  .navigation-top-menu .btn.btn-write-mode.btn-write-mode-change-state i.eye::before {
    content:'\f023'; /* fa-lock unicode */
    font-size:14px;
    font-family:'FontAwesome';
  }
  
  /* ── btn-link ── */
  .navigation-top-menu .btn-link { color:rgba(255,255,255,0.55); transition:color 0.2s ease; }
  .navigation-top-menu .btn-link:focus,
  .navigation-top-menu .btn-link:hover { color:var(--text-bright); }
  
  /* ── Dropdowns ── */
  .navigation-top-menu .dropdown.dropdown-squares { margin-left:0.75em; }
  .navigation-top-menu .dropdown.dropdown-autopilot { margin-left:0; }
  
  .navigation-top-menu .dropdown-menu {
    background-color:var(--dropdown-bg);
    border:1px solid var(--dropdown-border);
    border-radius:6px; margin-top:2px; font-size:13px;
    box-shadow:0 8px 32px rgba(0,0,0,0.55);
  }
  .navigation-top-menu .dropdown-menu.dropdown-menu--white,
  .navigation-top-menu .dropdown-menu.dropdown-menu--white .dropdown-menu {
    background-color:#1a1a1a; border:1px solid rgba(255,255,255,0.12);
  }
  .navigation-top-menu .dropdown-menu > li > a {
    font-family:'Open Sans',sans-serif; padding:7px 18px;
    color:rgba(255,255,255,0.65); display:flex; align-items:center; gap:8px;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .navigation-top-menu .dropdown-menu.dropdown-menu--white > li > a,
  .navigation-top-menu .dropdown-menu.dropdown-menu--white .dropdown-menu > li > a { color:rgba(255,255,255,0.7); }
  .navigation-top-menu .dropdown-menu > li > a:focus,
  .navigation-top-menu .dropdown-menu > li > a:hover { background-color:var(--dropdown-hover); color:var(--text-bright); }
  .navigation-top-menu .dropdown-menu.dropdown-menu--white > li > a:focus,
  .navigation-top-menu .dropdown-menu.dropdown-menu--white > li > a:hover,
  .navigation-top-menu .dropdown-menu.dropdown-menu--white .dropdown-menu > li > a:focus,
  .navigation-top-menu .dropdown-menu.dropdown-menu--white .dropdown-menu > li > a:hover { background-color:rgba(255,255,255,0.06); color:var(--text-bright); }
  .navigation-top-menu .dropdown-menu .divider { background-color:rgba(255,255,255,0.07); margin:4px 0; }
  .navigation-top-menu li.right .dropdown-menu { right:0; left:auto; }
  .navigation-top-menu .dropdown-squares .dropdown-menu .open-map-wrapper { height:16px; width:16px; display:inline-block; }
  .navigation-top-menu .dropdown-squares .dropdown-menu .open-map-wrapper .open-map-img { width:14px; height:14px; margin-left:-2px; margin-top:-4px; filter:brightness(2); }
  
  /* ── Toggle switch ── */
  .navigation-top-menu .toggle-switch { height:100%; margin-right:0; display:flex; align-items:center; padding:0 8px; }
  .navigation-top-menu .toggle-switch input[type=checkbox] { display:none; }
  .navigation-top-menu .toggle-switch label { cursor:pointer; margin:0; }
  .navigation-top-menu .toggle-switch label .toggle-track { display:block; height:14px; width:28px; background:rgba(255,255,255,0.15); border-radius:14px; position:relative; border:1px solid rgba(255,255,255,0.2); transition:background 0.2s ease; }
  .navigation-top-menu .toggle-switch .toggle-track:before { content:''; display:inline-block; height:18px; width:18px; background:rgba(255,255,255,0.4); border-radius:50%; position:absolute; top:-3px; right:10px; transition:right 0.2s ease, background 0.2s ease; box-shadow:0 1px 4px rgba(0,0,0,0.4); }
  .navigation-top-menu .toggle-switch input[type="checkbox"]:checked + label .toggle-track:before { background:var(--accent); right:-1px; box-shadow:0 1px 6px rgba(255,97,113,0.5); }
  .navigation-top-menu .toggle-switch input[type="checkbox"]:checked + label .toggle-track { background:rgba(255,97,113,0.2); border-color:rgba(255,97,113,0.4); }
  
  /* ── Notifications dropdown ── */
  .navigation-top-menu .dropdown-menu.dropdown-menu-notifications { min-width:360px; background:var(--dropdown-bg); }
  @media screen and (max-width:479px) {
    .navigation-top-menu .dropdown-menu.dropdown-menu-notifications { max-width:calc(100vw - 36px); min-width:calc(100vw - 36px); }
  }
  .navigation-top-menu .dropdown-menu .scrollable-menu { height:auto; max-height:260px; overflow-x:hidden; }
  
  /* ── Profile image ── */
  .navigation-top-menu img.profile-image { border-radius:50%; margin-right:6px; width:auto; height:30px; border:1.5px solid rgba(255,255,255,0.2); }
  
  /* ── Me dropdown ── */
  .navigation-top-menu .dropdown-menu.top-right { min-width:260px; }
  .navigation-top-menu .dropdown-menu.top-right .media-heading { color:var(--text-bright) !important; font-size:16px !important; }
  
  /* ── Menu icon spacer ── */
  .navigation-top-menu i.menu-icon { display:inline-block; width:16px; height:16px; }
  
  /* ── Vertical separator ── */
  .navigation-top-menu li.separator-vertical { padding-right:0.5em; padding-left:0.5em; }
  .navigation-top-menu li.separator-vertical > div { width:1px; height:55%; background-color:var(--sep-color); position:relative; top:50%; transform:translateY(-50%); }
  
  /* ================================================================
     SIDEBAR DRAWER
     Replaces the floating top nav (Navigation / My Cloud /
     Contacts & Groups / Administration).
     Slides in from the left — triggered by a hamburger button.
     ================================================================ */
  
  /* Overlay */
  .dt-sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.55); z-index:1040;
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  }
  .dt-sidebar-overlay.open { display:block; }
  
  /* Drawer */
  .dt-sidebar {
    position:fixed; top:0; left:0; bottom:0; width:260px;
    background:#0a0a0a; border-right:1px solid rgba(255,255,255,0.08);
    z-index:1050; transform:translateX(-100%);
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
    display:flex; flex-direction:column;
    box-shadow:4px 0 24px rgba(0,0,0,0.6);
  }
  .dt-sidebar.open { transform:translateX(0); }
  
  /* Header */
  .dt-sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.07); flex-shrink:0; }
  .dt-sidebar-logo { font-family:Raleway,sans-serif; font-weight:700; font-size:1.25rem; color:#fff; letter-spacing:0.03em; }
  .dt-sidebar-logo span { color:var(--accent); }
  .dt-sidebar-close { background:transparent; border:none; color:rgba(255,255,255,0.4); font-size:1.2rem; cursor:pointer; padding:4px 6px; border-radius:4px; transition:color 0.2s, background 0.2s; line-height:1; }
  .dt-sidebar-close:hover { color:#fff; background:rgba(255,255,255,0.07); }
  
  /* Nav list */
  .dt-sidebar-nav { list-style:none; padding:12px 0; margin:0; flex:1; overflow-y:auto; }
  .dt-sidebar-nav li a { display:flex; align-items:center; gap:12px; padding:10px 20px; font-family:Raleway,sans-serif; font-size:0.88rem; font-weight:600; color:rgba(255,255,255,0.6); text-decoration:none; border-left:2px solid transparent; transition:background 0.15s ease, color 0.15s ease; }
  .dt-sidebar-nav li a:hover { background:rgba(255,255,255,0.05); color:#fff; border-left-color:var(--accent); }
  .dt-sidebar-nav li a.active { background:var(--accent-dim); color:var(--accent); border-left-color:var(--accent); }
  .dt-sidebar-nav li a i { font-size:1rem; width:18px; text-align:center; color:inherit; }
  
  /* Section label */
  .dt-sidebar-section { padding:8px 20px 4px; font-family:Raleway,sans-serif; font-size:0.6rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.25); }
  .dt-sidebar-divider { height:1px; background:rgba(255,255,255,0.06); margin:6px 16px; }
  
  /* Footer */
  .dt-sidebar-footer { padding:14px 20px; border-top:1px solid rgba(255,255,255,0.07); font-size:0.72rem; color:rgba(255,255,255,0.2); flex-shrink:0; }
  .dt-sidebar-footer a { color:rgba(255,255,255,0.3); text-decoration:none; transition:color 0.2s; }
  .dt-sidebar-footer a:hover { color:var(--accent); }
  

  /* Ensure proper spacing */
.navigation-top-menu .dropdown.dropdown-squares > .dropdown-menu {
  margin-top: 0;
}